How to create buttons

Creating buttons from existing bases and symbols

 

To create buttons, you must use a base and add a symbol over it. Several bases are provided in different colors. Symbols are provided only in blue color (blank symbols are also available in parent folder: 100% white they can be used with any colored base). The blue color symbols can be used as-is only with the blue base: "Base Blue.png". If you want to use the colored symbols with other bases, you must change their color (Hue) before adding them.

See below the procedures used to create the 5 sample buttons included in this folder.

1. Make sure the Librarian is displayed and the "iKon Icons" folder is selected.

2. Create a new icon project (choose 256x256 RGB/A format)

3. Create each icon using the images specified below (First image to add is on top of list):

 

Sample1.png

Add the following images into your project:

1. Folder "Button 1" - "Base Blue.png"

2. Folder "Button 1/Symbols" - "Arrow1 Right.png".

The symbol objects included in this folder are ready-to-use for the blue base, so we keep it unchanged.

Sample2.png

Add the following images into your project:

1. Folder "Button 1" - "Base Magenta.png"

2. Folder "Button 1/Symbols" - "Arrow1 Up.png".

3. Only one blue-coloured version of this effect image is provided, so you need to adjust the hue (tint) to match the desired color: Without deselecting the newly-added object, adjust Hue/Saturation (Press "U" key). Set "Hue" to +60.

 

Sample3.png

Add the following images into your project:

1. Folder "Button 1" - "Base Magenta.png"

2. Folder "Button 1/Symbols" - "Cancel.png".

3. Only one blue-coloured version of this effect image is provided, so you need to adjust the hue (tint) to match the desired color: Without deselecting the newly-added object, adjust Hue/Saturation (Press "U" key). Set "Hue" to +140.

Sample4.png

Add the following images into your project:

1. Folder "Button 1" - "Base Green Light.png"

2. Folder "Button 1/Symbols" - "Ok.png".

3. Only one blue-coloured version of this effect image is provided, so you need to adjust the hue (tint) to match the desired color: Without deselecting the newly-added object, adjust Hue/Saturation (Press "U" key). Set "Hue" to -110 and "Saturation" to -20.

 

Sample5.png

Add the following images into your project:

1. Folder "Button 1" - "Base Black.png"

2. Folder "Button 1/Symbols" - "Email.png".

3. Only one blue-coloured version of this effect image is provided, so you need to adjust the hue (tint) to match the desired color: Without deselecting the newly-added object, adjust Hue/Saturation (Press "U" key). Set "Saturation" to -100.

4. Without deselecting the newly-added object, adjust Brightness/Contrast (Press "B" key). Set "Brightness" to -20 and "Contrast" to +30.